<template>
  <section class="page-container">
    <img
      v-animate="'fadeIn'"
      :src="DemoImg"
      alt="示例图片"
      width="300"
    >
    <section
      v-animate="'fadeIn'"
      class="mt-12"
    >
      使用v-animate动画钩子实现动画
    </section>

    <a
      class="mt-12"
      href="https://animatecss.node.org.cn/"
      target="_blank"
    >只需添加水就能实现的 CSS 动画 Animate.css</a>
  </section>
</template>

<script lang="ts" setup name="Animate">
import 'animate.css';

import DemoImg from '@/assets/images/cropper-demo.jpeg';
</script>

<style lang="scss" scoped>
.page-container {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}
</style>
